<template>
  <div ref="gantt" style="width: 100%; height: 100vh"></div>
</template>

<script>
import 'dhtmlx-gantt'
export default {
  name: 'gantt',
  props: {
    tasks: {
      type: Object,
      default () {
        return {data: [], links: []}
      }
    }
  },
  mounted: function () {
    this.getGanttInfo()
  },
  // watch: {
  //   tasks:{
  //       deep: true,
  //       handler(newValue, oldValue) {
  //         this.tasks = newVal
  //         console.log(newValue);
  //         this.getGanttInfo()
  //       }
  //     }
  // },
  methods:{
    getGanttInfo(){
      gantt.config.tooltip_label = 10;
      gantt.config.readonly = true;   // 只读模式
      gantt.attachEvent("onTaskDblClick", function (id, e) {return false})  //  禁止点击进行弹窗
      //  gantt.config.drag_project = true;
      //  gantt.config.order_branch = true;
      //  gantt.config.show_progress = true;
      //  gantt.config.autofit = false;
      //  gantt.config.drag_move = false;
      //  gantt.config.drag_resize = false;  // 禁止右侧时间工期 左右拖动
      //  gantt.templates.grid_row_class = function(start, end, task){if(drag_id && task.id != drag_id){if(task.$level != gantt.getTask(drag_id).$level)return "cant-drop";}return "";};
      //  gantt.attachEvent("onAfterLightbox", function () {});
      // gantt.config.order_branch = false;
      // gantt.config.order_branch_free = false;

      // gantt.config.show_quick_info = false;
      gantt.config.open_tree_initially = true;  // 默认打开树
      // gantt.templates.grid_row_class = function( start, end, task ){if ( task.$level > 1 ){return "nested_task"}return "";};  //  隐藏添加按钮
      gantt.config.columns =  [  // 配置表头
        {name:"text",       label:"名称",  tree:true, align:"center", width:200,},
        // {name:"holder",     label:"Holder",     align:"center" },
        {name:"start_date", label:"开始时间", align:"center" ,width:100},
        {name:"end_date",   label:"结束时间",   align:"center",width:100, },
        // {name:"progress",   label:"Progress",   align:"center" },
      ];
      gantt.plugins({
        tooltip: true,
        quick_info: false,// 快速信息框 进行隐藏
        // multiselect: true,// 激活多任务选择
      });
      gantt.templates.tooltip_text = function (start, end, task) {
        return (
            "<b>项目:</b> " +
            task.text +
            "<br/><span>开始时间:</span> " +
            gantt.templates.tooltip_date_format(start) +
            "<br/><span>结束时间:</span> " +
            gantt.templates.tooltip_date_format(end)
        );
      };
      //设置 scale_unit 属性为 month，以显示月刻度
      gantt.config.scale_unit = "month";
      //设置 step 属性为 1，以每个月显示一个刻度
      gantt.config.step = 1;
      //设置 date_scale 属性为 %Y-%m-%d，以显示年月日格式的刻度
      gantt.config.date_scale = "%Y-%m-%d";
      //设置 scale_date 属性为 gantt.date.monthStart，以从每个月的第一天开始显示刻度。
      gantt.config.scale_date = gantt.date.monthStart;
      //设置 subscale 属性为一个包含两个刻度的对象，分别为 day 和 week。
      gantt.config.subscales = [ // 配置时间
        { unit: "day", step: 1, date: "%d" },
        // { unit: "week", step: 1, date: "#%W" }
      ];
      // gantt.init("gantt_here", new Date(2018, 02, 31), new Date(2018, 03, 09));
      gantt.init(this.$refs.gantt)
      gantt.parse({  // 根据自己需要的数据进行赋值转换
        data: [
          {
            text: 'Test001-001',//任务名
            start_date: '19-04-2017',//开始时间
            id: 1,//任务id
            duration: 13,//任务时长，从start_date开始计算
            progress: 1,//任务完成情况，进度
            parent: 3,//父任务ID
            user: "李四",//成员
            planned_end:'19-04-2017', //计划开始时间
            planned_start:'10-04-2017',//计划结束时间
            show:false,
            open: true,//默认是否打开
            type: 'project'// gantt.config.types.milestone为里程碑类型
            // project为项目任务类型，也就是摘要任务，
            // task为普通任务类型
          },
          {id: 2, text: 'Task #1', start_date: '15-04-2021', duration: 3, progress: 1},
          {id: 3, text: 'Task #2', start_date: '18-04-2022', duration: 3, progress: 1}
        ]
      })
    }
  }
}
</script>

<style>
@import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
.nested_task .gantt_add{display: none !important;}
</style>

